<template>
    <div style="width: 100%;height: 100%;">
        <div style="
            display: flex;
            flex-direction: row;
            position: relative;
        ">
            <el-button-group v-if="popups.length>0">
                <template v-for="(popup, index) in popups">
                    <el-button type="primary" @click="togglePopup(index)">
                        <span class="icon">{{ popup.visible ? '×' : '☰' }}</span>
                        <span class="text">{{ popup.title }}</span>
                    </el-button>
                    <FloatPopup :visible="popup.visible"
                                @close="setPopupVisible(index, false)"
                                :style="{ width: popup.width, height: popup.height }"
                                v-bind="popup.position"
                                @positionChange="handlePositionChange(index, $event)">
                        <component :is="popup.content"></component>
                    </FloatPopup>
                </template>
            </el-button-group>
        </div>
    </div>
</template>
<script>
    import FloatPopup from "./FloatPopup.vue";
    import M1 from "./M1.vue";
    import M2 from "./M2.vue";

    export default {
        components: {FloatPopup,M1,M2},
        data() {
            return {
                popups: [
                    {
                        id: '1',
                        title: '测试M1',
                        visible: false,
                        width: '500px',
                        height: '220px',
                        position: { left: 100, top: 150 },
                        content: 'M1',
                    },
                    {
                        id: '2',
                        title: '测试M2',
                        visible: false,
                        width: '500px',
                        height: '220px',
                        position: { right: 0, top: 0 },
                        content: 'M2',
                    },
                ]
            }
        },
        methods:{
            // 控制悬浮窗部分
            togglePopup(index) {
                this.popups[index].visible = !this.popups[index].visible;
            },
            setPopupVisible(index, visible) {
                this.popups[index].visible = visible;
            },
            handlePositionChange(index, newPos) {
                this.popups[index].position = newPos;
            },
        },
    }
</script>